<template>
  <div id="detail">
    <!-- 导航栏 -->
    <detail-nav-bar @navClick="navClick" ref="index"/>
    <!-- 顶部轮播图 -->
    <better-scroll class="content" ref="scroll" @scroll="scrolls" :probeType="3" :pull-up-load="true">
      <detail-swiper :topimgs = "topImages"></detail-swiper>
      <!-- 商品详情 -->
      <detail-base-info :goodsItem = "goods"></detail-base-info>
      <!-- 店铺信息 -->
      <detail-shop-info :shop = "shop"></detail-shop-info>
      <!-- 图片列表 -->
      <detail-goods-info :detailinfo="detailinfo" @imgLoad="imgLoad"></detail-goods-info>
      <!-- 商品参数 -->
      <detail-goods-param :goodsparam="goodsparam" ref="params"></detail-goods-param>
      <!-- 用户评价 -->
      <detail-eva :goodseva="goodseva" ref="eva"></detail-eva>
      <!-- 商品推荐 -->
      <goods-list :goods="recommends" ref="recommend"></goods-list>
    
    </better-scroll>

    <detail-bottom-bar @showCart="showCart"></detail-bottom-bar>

    <good-style :product="product" @back="back" v-show="showcart" @showMess="showMess" class="goodstyle"></good-style>

    <div class="mess" v-show="showmess">
      <img src="~assets/img/common/mess.svg" alt="">
      <span>添加购物车成功</span>
    </div>

  </div>
</template>

<script>

import GoodStyle from "components/contents/goods/GoodStyle"

import detailNavBar from './childComps/detailNavBar.vue'
import detailSwiper from './childComps/detailSwiper.vue'
import detailBaseInfo from './childComps/detailBaseInfo.vue'
import detailShopInfo from './childComps/detailShopInfo.vue'
import detailGoodsInfo from './childComps/detailGoodsInfo.vue'
import detailGoodsParam from './childComps/detailGoodsParam.vue'
import detailEva from './childComps/detailEva.vue'
import detailBottomBar from './childComps/detailBottomBar.vue'

import GoodsList from 'components/contents/goods/GoodsList'

import betterScroll from 'components/common/scroll/betterScroll.vue'

import {debounce} from 'common/utils.js'

import {getDetail, getRecommend, Goods, Shop, GoodsParam,GoodsEva, product} from 'network/detail.js'

export default {
  name: 'detail',
  components:{
    detailNavBar,
    detailSwiper,
    detailBaseInfo,
    detailShopInfo,
    detailGoodsInfo,
    detailGoodsParam,
    detailEva,
    detailBottomBar,
    GoodsList,
    betterScroll,
    GoodStyle
  },
  data(){
    return{
      iid: null,
      topImages: [],
      goods: {},
      shop: {},
      detailinfo: {},
      goodsparam:{},
      goodseva:{},
      recommends: [],
      themeY:[],
      currentIndex:0,
      product:{},
      showcart:false,
      showmess:false,//添加购物车成功提示
    }
  },
  created(){
    this.iid = this.$route.params.iid;

    //根据iid请求对应的商品信息
    getDetail(this.iid).then(res => {
      //console.log(res);   
      const data = res.result;  
      //获取顶部轮播图
      this.topImages = data.itemInfo.topImages;
      //获取商品信息
      this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
      //获取店铺信息
      this.shop = new Shop(data.shopInfo)
      //获取图片列表
      this.detailinfo = data.detailInfo
      //获取商品规格信息
      this.goodsparam = new GoodsParam(data.itemParams.info,data.itemParams.rule)
      // console.log(data.itemParams.info)
      //获取用户评价
      //  console.log(data.rate)
      this.goodseva = new GoodsEva(data.rate)
    
      //加入购物车商品的信息
      this.product=new product(this.iid,data.itemInfo,data.skuInfo);

    })

    getRecommend().then(res =>{
      // console.log(res)
      this.recommends = res.data.list
  })
  
   
  },

  methods:{
    showMess(){
      this.showcart=false;
      clearTimeout(timer);
      this.showmess=true;
      let timer=setTimeout(()=>{
        this.showmess=false;
      },1500)
    },
    showCart(){
      this.showcart=true;
    },
    back(){
      this.showcart=false;
    },
    imgLoad(){
      this.$refs.scroll.scroll.refresh();   
      debounce(this.getThemeTops(),300);
    },
    getThemeTops(){
      this.themeY = []

          this.themeY.push(0)
          this.themeY.push(this.$refs.params.$el.offsetTop)
          this.themeY.push(this.$refs.eva.$el.offsetTop)
          this.themeY.push(this.$refs.recommend.$el.offsetTop)
          this.themeY.push(Number.MAX_VALUE);
          //console.log(this.themeY)
    },
    navClick(index){
      // console.log(index)
      this.$refs.scroll.scroll.scrollTo(0, -this.themeY[index]+49, 500)
    },
    scrolls(position){
      //console.log(position.y)
      let positionY = -position.y
      for(let i =0; i<this.themeY.length+1; i++){
        if(positionY >= this.themeY[i] && positionY < this.themeY[i+1]){
          this.currentIndex = i;
           console.log(this.currentIndex)
           this.$refs.index.currentIndex = this.currentIndex
        }
       
      }
    }
  }


}
</script>

<style scoped>
  #detail{
    position: relative;
    z-index: 9;
    background-color: #fff;
    height: 100vh;
  }

  .content{
    
    height: calc(100% - 44px);
    overflow: hidden;
  }
  .goodstyle{
    z-index: 9;
  }
  .mess{
  width: 200px;
  height: 100px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .6);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -72px;
  line-height: 100px;
  text-align: center;
  color: rgb(199, 197, 197);
}
</style>